<template>
	<view class="alarm-content">
		<view class="menu">
			<uni-segmented-control :current="current" :values="values" @clickItem="onClickItem" styleType="button"
				activeColor="#007AFF"></uni-segmented-control>
		</view>

		<view class="content">
			<!-- 历史列表 -->
			<view class="one" v-show="current == 0">
				<view class="box">
					<view class="text">
						报警类型分布
					</view>
				</view>
				<view class="box">
					<view class="text">
						故障频率趋势
					</view>
				</view>
				<view class="statistics-cards">
					<view class="stat-card">
						<view class="stat-number">{{ totalAlarms }}</view>
						<view class="stat-label">报警总数</view>
					</view>
					<view class="stat-card">
						<view class="stat-number warning">{{ pendingAlarms }}</view>
						<view class="stat-label">待处理</view>
					</view>
					<view class="stat-card">
						<view class="stat-number success">{{ handledAlarms }}</view>
						<view class="stat-label">已处理</view>
					</view>
				</view>
				<view class="alarm-list">
					<view v-for="(alarm, index) in alarms" :key="index" class="alarm-item">
						<view class="alarm-header">
							<view class="alarm-time">{{ alarm.time }}</view>
							<view :class="['alarm-priority', alarm.priority]">{{ alarm.priorityText }}</view>
						</view>
						<view class="alarm-content">
							<view class="alarm-title">{{ alarm.title }}</view>
							<view class="alarm-info">
								<text>设备：{{ alarm.device }}</text>
								<text>单位：{{ alarm.unit }}</text>
							</view>
						</view>
						<view class="alarm-footer">
							<uni-button size="mini" type="primary" @click="viewDetail(alarm)">查看详情</uni-button>
							<uni-button size="mini" type="default" @click="handleAlarm(alarm)">处理工单</uni-button>
						</view>
					</view>
				</view>
			</view>
			<!-- 历史设置 -->
			<view class="two" v-show="current == 1">
				<view class="settings-container">
					<view class="setting-section">
						<view class="section-title">基础设置</view>
						<!-- 基础设置 -->
						<view class="form-group">
							<label>选择单位</label>
							<input type="text" v-model="selectedUnit" placeholder="请选择" readonly
								@click="openPopup('unit')" />
						</view>

						<view class="form-group">
							<label>选择设备</label>
							<input type="text" v-model="selectedDevice" placeholder="请选择" readonly
								@click="openPopup('device')" />
						</view>

						<view class="form-group">
							<label>优先级</label>
							<input type="text" v-model="selectedPriority" placeholder="请选择" readonly
								@click="openPopup('priority')" />
						</view>

						<!-- 弹窗 -->
						<uni-popup ref="popup" type="bottom">
							<view class="popup-content">
								<!-- 列表数据 -->
								<scroll-view scroll-y="true">
									<view v-for="(item, index) in popupData" :key="index" class="list-item"
										@click="selectItem(item)">
										{{ item }}
									</view>
								</scroll-view>
							</view>
						</uni-popup>
					</view>
					<view class="setting-section">
						<view class="section-title">通知设置</view>
						<view class="notification-options">
							<uni-list>
								<uni-list-item title="声音提醒" direction="row">
									<template v-slot:footer>
										<switch :checked="soundAlert" @change="toggleSound" />
									</template>
								</uni-list-item>
								<uni-list-item title="推送通知" direction="row">
									<template v-slot:footer>
										<switch :checked="pushNotification" @change="togglePush" />
									</template>
								</uni-list-item>
							</uni-list>
						</view>
					</view>
				</view>
			</view>
			<!-- 历史记录 -->
			<view class="three" v-show="current == 2">
				<view class="history">
					<!-- 顶部操作栏 -->
					<view class="top-bar">
						<uni-datetime-picker class="boxtop" type="date" v-model="selectedDate"
							placeholder="选择日期"></uni-datetime-picker>
						<picker class="boxtop" @change="handlePickerChange" :value="selectedIndex" :range="options">
							<view class="picker">
								{{ options[selectedIndex] || '请选择' }}
							</view>
						</picker>
					</view>

					<!-- 报警信息列表 -->
					<view class="alarm-list">
						<view class="alarm-item" v-for="(item, index) in historyalarms" :key="index">
							<text class="history-time">{{ item.time }}</text>
							<view class="history-content">
								<text class="history-title">{{ item.title }}</text>
								<view class="history-detail">
									<text>处理状态：{{ item.status }}</text>
									<text>处理人：{{ item.handler }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref,
		reactive
	} from 'vue';
	const current = ref(0)
	const classify = [{
		key: "1",
		value: "报警列表"
	}, {
		key: "2",
		value: "报警设置"
	}, {
		key: "3",
		value: "历史记录"
	}]
	const values = computed(() => classify.map(item => item.value))

	//三个小方盒子
	const totalAlarms = ref(156);
	const pendingAlarms = ref(23);
	const handledAlarms = ref(133);
	//报警列表
	const alarms = ref([{
			time: '2024-01-20 14:30',
			priority: 'high',
			priorityText: '紧急',
			title: '温度过高报警',
			device: '空调主机-A区',
			unit: '生产部门'
		},
		{
			time: '2024-01-20 13:15',
			priority: 'medium',
			priorityText: '警告',
			title: '能耗异常',
			device: '配电箱-B区',
			unit: '办公区'
		}
	]);

	//报警设置
	// 数据源
	const popupData = ref(['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7', '选项8', '选项9']); // 弹窗中的数据

	// 响应式变量
	const showPopup = ref(false); // 控制弹窗显示
	const selectedUnit = ref(''); // 选择单位的值
	const selectedDevice = ref(''); // 选择设备的值
	const selectedPriority = ref(''); // 优先级的值
	const popup = ref(null); // 获取弹窗实例
	const activeInput = ref(null);
	const soundAlert = ref(true); //声音提示开关
	const pushNotification = ref(true); //推送消息开关


	// 方法：打开弹窗并记录当前输入框
	const openPopup = (type) => {
		activeInput.value = type; // 记录当前输入框类型
		if (popup.value) {
			popup.value.open(); // 手动打开弹窗
		}
	};
	// 方法：关闭弹窗
	const closePopup = () => {
		showPopup.value = false;
	};

	const selectItem = (value) => {
		// 根据当前激活的输入框类型更新对应的值
		switch (activeInput.value) {
			case 'unit':
				selectedUnit.value = value;
				break;
			case 'device':
				selectedDevice.value = value;
				break;
			case 'priority':
				selectedPriority.value = value;
				break;
			default:
				console.error('Unknown input type');
		}

		// 关闭弹窗
		if (popup.value) {
			popup.value.close();
		}

		// 清空激活状态
		activeInput.value = null;
	};
	//通知设置
	const toggleSound = (e) => {
		soundAlert.value = e.detail.value;
	};
	const togglePush = (e) => {
		pushNotification.value = e.detail.value;
	};

	//历史记录
	// 假设的数据
	const historyalarms = [{
			time: '2024-01-19 10:30',
			title: '设备故障报警',
			status: '已处理',
			handler: '张工'
		},
		{
			time: '2024-01-18 15:45',
			title: '温度异常报警',
			status: '已处理',
			handler: '李工'
		}
	];

	const selectedDate = ref('');
	const selectedIndex = ref(0);
	const options = ['选项1', '选项2', '选项3'];

	const handlePickerChange = (e) => {
		selectedIndex.value = e.detail.value;
	};


	//点击菜单
	const onClickItem = (e) => {
		current.value = e.currentIndex
	}
</script>

<style lang="scss">
	page {
		height: 100%;

		.alarm-content {
			height: 100%;

			.content {
				height: 100%;
				background-color: #F5F5F5;
				padding: 20rpx;

				.box {
					height: 100rpx;
					background: #fff;
					padding: 20rpx;
					border-radius: 12rpx;
					margin-top: 20rpx;
				}

				.statistics-cards {
					display: flex;
					padding: 20rpx;
					justify-content: space-between;

					.stat-card {
						background-color: #ffffff;
						padding: 30rpx;
						border-radius: 12rpx;
						width: 130rpx;
						text-align: center;
						box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

						.stat-number {
							font-size: 24px;
							font-weight: bold;
							color: #333333;
						}

						.stat-number.warning {
							color: #ff9800;
						}

						.stat-number.success {
							color: #4caf50;
						}

						.stat-label {
							font-size: 14px;
							color: #666666;
							margin-top: 10rpx;
						}
					}
				}

				.alarm-list {
					padding: 20rpx;

					.alarm-item {
						background-color: #ffffff;
						border-radius: 12rpx;
						padding: 30rpx;
						margin-bottom: 20rpx;
						box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

						.alarm-header {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 20rpx;

							.alarm-time {
								color: #999999;
								font-size: 14px;
							}

							.alarm-priority {
								padding: 4rpx 16rpx;
								border-radius: 30rpx;
								font-size: 12px;
							}

							.alarm-priority.high {
								background-color: #ffebee;
								color: #f44336;
							}

							.alarm-priority.medium {
								background-color: #fff3e0;
								color: #ff9800;
							}
						}

						.alarm-content {
							margin-bottom: 20rpx;

							.alarm-title {
								font-size: 16px;
								font-weight: bold;
								color: #333333;
								margin-bottom: 10rpx;
							}

							.alarm-info {
								display: flex;
								flex-direction: column;
								gap: 10rpx;
								color: #666666;
								font-size: 14px;
							}
						}

						.alarm-footer {
							display: flex;
							justify-content: flex-end;
							gap: 20rpx;

						}
					}
				}

				.two {
					.settings-container {
						.setting-section {
							background-color: #ffffff;
							border-radius: 12rpx;
							padding: 30rpx;
							margin-bottom: 20rpx;
							box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

							.section-title {
								font-size: 16px;
								font-weight: bold;
								color: #333333;
								margin-bottom: 30rpx;
							}

							.form-group {
								display: flex;
								align-items: center;
								margin-bottom: 20px;
							}

							label {
								width: 80px;
								text-align: right;
								margin-right: 10px;
							}

							input {
								flex: 1;
								height: 36px;
								border: 1px solid #ccc;
								border-radius: 4px;
								padding: 0 10px;
							}

							.popup-content {
								background: #fff;
								padding: 30rpx;
								border-radius: 30rpx 30rpx 0 0;
								overflow: hidden;

								scroll-view {
									max-height: 60vh;

									.list-item {
										padding: 15px;
										border-bottom: 1px solid #eee;
										cursor: pointer;
									}
								}

							}
						}
					}
				}

				.three {
					.history {
						.top-bar {
							display: flex;
							justify-content: space-between;
							margin-bottom: 20px;
							gap: 10rpx;

							.boxtop {
								flex: 1;
								background-color: #fff;
								border: 1px solid #ddd;
								border-radius: 4px;
								display: flex;
								align-items: center;
								padding-left: 20rpx;
							}
						}

						.alarm-list {
							margin-top: 20px;

							.alarm-item {
								background-color: #ffffff;
								border-radius: 12rpx;
								padding: 30rpx;
								margin-bottom: 20rpx;
								.history-time {
									color: #999999;
									font-size: 14px;
									margin-bottom: 10rpx;
								}
								.history-content{
									.history-title {
										font-size: 16px;
										color: #333333;
										margin-bottom: 10rpx;
									}
									
									.history-detail {
										display: flex;
										flex-direction: column;
										gap: 10rpx;
										color: #666666;
										font-size: 14px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>